<template>
  <div>
    <van-row>
      <van-col span="24">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          input-align="center"
        />
      </van-col>
    </van-row>
    <!-- 顶部选项卡 -->

    <van-tabs>
      <van-tab
        v-for="(value, index) of detail_tab"
        :key="index"
        :title="value.title"
      >
        <!-- 顶部选项卡的第一张图片-->
        <van-row>
          <van-col span="24">
            <div class="banner_bj">
              <img
                src="https://n1-q.mafengwo.net/s7/M00/2E/D4/wKgB6lSgx0KAAtuCAAVoSPI1DUk40.jpeg?imageMogr2%2Fthumbnail%2F%21375x225r%2Fgravity%2FCenter%2Fcrop%2F%21375x225%2Fquality%2F100"
              />

              <div class="banner_padd">
                <div class="banner_textt">
                  <p>{{ detail_img.title }}</p>
                  <p>{{ detail_img.title1 }}</p>
                </div>

                <div class="banner_textb">
                  <div class="textb_left">
                    <p>{{ detail_img.title2 }}</p>
                    <p>{{ detail_img.title3 }}</p>
                  </div>
                  <div class="textb_right">{{ detail_img.title4 }}</div>
                </div>
              </div>
            </div>
          </van-col>
        </van-row>
        <!-- 顶部选项卡的第一张图片结束-->

        <!-- 顶部选项卡的第二组张图片-->
        <van-row>
          <van-col span="12">
            <div class="bimg_left">
              <img
                src="https://p1-q.mafengwo.net/s6/M00/B5/40/wKgB4lJ8yDCAVrsrAByucWB7nS440.jpeg?imageMogr2%2Fthumbnail%2F%21188x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21188x100%2Fquality%2F90"
              />
            </div>
          </van-col>
          <van-col span="12">
            <div class="bimg_right">
              <img
                src="https://n1-q.mafengwo.net/s5/M00/F1/25/wKgB3FF_0AyANFtEAAtrjCze0Ec37.jpeg?imageMogr2%2Fthumbnail%2F%21188x100r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21188x100%2Fquality%2F90"
              />

              <div class="bimg_tetx">
                <!-- 像这种格式写在数据库否则很麻烦 -->
                <b style="color: #ffdb26;">367.2万</b>
                张实拍美照
                <br />马上点击欣赏
              </div>
            </div>
          </van-col>
        </van-row>
        <!-- 顶部选项卡的第二组张图片结束-->
        <!-- 旅游攻略内容开始 -->
        <van-row>
          <van-col span="24">
            <div class="lv_go">
              <!-- 旅游攻略 -->
              <div class="go_title">
                <p>旅游攻略</p>

                <!-- <p>{{ detail_title.title0 }}</p> -->
              </div>
              <!-- 旅游攻略 结束-->
              <!-- 北京介绍 -->
              <div class="bj_js" v-if="detail_title.title1">
                {{ detail_title.title1 }}
              </div>
              <div class="bj_js" v-else>
                北京，位于华北平原，有着三千余年的建城史和八百五十余年的建都史。北京是中华人民共和国首都、中央直辖市、中国国家中心城市，也是中国政治、文化、教育和国际交流中心。是一座传统与现代交融的城市。这里既有古典风韵，又具时尚气息。
              </div>

              <!-- 北京介绍结束-->
              <!-- 内容速览开始 -->
              <div class="redde_a">
                {{ detail_title.title2 }}
                <router-link
                  to="/"
                  v-for="(value, index) of detail_sulan"
                  :key="index"
                  >{{ value.title }}</router-link
                >
              </div>
              <!-- 阅读更多 -->
              <div class="read_more" v-if="detail_title.title3">
                {{ detail_title.title3 }}
              </div>
              <div class="read_more" v-else>阅读更多</div>

              <!-- 内容速览结束 -->
            </div>
          </van-col>
        </van-row>
        <!-- 旅游攻略内容结束 -->
        <!-- 循环标签板块开始 -->
        <van-row>
          <van-col span="24">
            <van-row>
              <van-col
                span="8"
                v-for="(value, index) of detail_gge"
                :key="index"
              >
                <div class="li_item li_item22">
                  <p>{{ value.title }}</p>
                  <p>{{ value.details }}</p>
                </div>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!-- 第二行 -->

        <!-- 第二行结束 -->
        <!-- 第3行开始-->

        <!-- 第3行结束 -->
        <!-- 第4行开始-->

        <!-- 第4行结束 -->
        <!-- 循环标签板块结束-->
      </van-tab>
    </van-tabs>
  </div>
</template>
<style>
body {
  background: #f4f4f4;
}
/* 选项卡下的第一个图 */
.banner_padd {
  width: 100%;
  position: absolute;
  padding: 130px 20px 0px;
  margin: 0 auto;
}
.banner_bj {
  position: relative;
  width: 100%;
  height: 249px;
}
.banner_bj img {
  position: absolute;
  width: 100%;
  max-height: 460.08;
  height: 249px;
  min-height: 249px;
}

.banner_textt {
  padding: 10px 0px;
  border-bottom: 1px solid black;
}
.banner_textt p:first-child {
  width: 100%;
  font-size: 22px;
  color: white;
}
.banner_textt p:last-child {
  display: block;
  width: 100%;
  font-size: 12px;
  color: white;
}
.banner_textb {
  width: 100%;
  padding: 10px 0px;
}
.textb_left,
.textb_right {
  width: 50%;

  float: left;
}
.textb_left {
  color: white;
}
.textb_right {
  text-align: right;
  line-height: 50px;
  color: #ffde40;
}

/* 选项卡下的第一个图 结束*/
/* 第二组图 */
.bimg_left {
  position: relative;
  width: 100%;
  height: 100px;
}
.bimg_right {
  position: relative;
  width: 100%;
  height: 100px;
}
.bimg_left img,
.bimg_right img {
  width: 100%;
  height: 100px;
}
.bimg_right img {
  position: absolute;
}
.bimg_tetx {
  width: 100%;
  height: 100%;
  color: white;
  font-size: 15px;
  position: absolute;
  padding: 10% 10%;
  background: rgba(0, 0, 0, 0.4);
}
/* 第二组图 结束*/

/* <!-- 旅游攻略内容开始 --> */

.lv_go {
  position: relative;
  margin: 25px 0 15px;
  padding: 10px 10px;

  background: white;
}
.go_title {
  padding: 19px 0 15px 0px;
}
.go_title p {
  padding-left: 10px;
  border-left: 3px solid #ff9d00;
}
/* <!-- 旅游攻略内容结束 --> */
/* <!-- 北京介绍 --> */
.bj_js {
  width: 100%;
  height: 81px;
  /* max-height: 81px; */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* <!-- 北京介绍结束--> */
/* <!-- 内容速览开始 --> */
.redde_a {
  width: 100%;
  height: 136px;
  height: 136px;
  color: #666;
}
.redde_a a {
  margin: 0 8px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #ff9d00;
  text-decoration: none;
}
.read_more {
  width: 158px;
  height: 43px;
  line-height: 43px;
  padding: 0 50px;
  color: #ff9d00;
  border: 1px solid #ff9d00;
  margin: 0 auto;
}
/* <!-- 内容速览结束 --> */

/* <!-- 循环标签板块开始--> */
.li_item {
  text-align: center;
  padding-top: 10px;
  height: 62px;
  background-color: white;
  border-bottom: 1px solid black;
}
.li_item22 {
  border-right: 1px solid black;
  /* border-left:1px solid black; */
}

/* <!-- 循环标签板块结束--> */
</style>
<script>
export default {
  data() {
    return {
      //  保存上一个页面的id
      iid: null,
      value: "",
      // 存储tab栏的数据
      detail_tab: [],
      // 存储北京图区域
      detail_img: {},
      // 旅游攻略
      detail_title: {},
      //    内容速览
      detail_sulan: [],
      // 9宫格
      detail_gge: [],
    };
  },
  watch: {
    // iid() {
    //   // 存储tab栏的数据
    //   // tab栏数据
    //   this.$axios.get("/detail_tab?lid=" + this.iid).then((res) => {
    //     this.detail_tab = [];
    //     this.detail_tab = res.data.results;
    //   });
    //   // tab栏数据结束
    //   // 北京图片
    //   this.$axios.get("/detail_img?lid=" + this.iid).then((res) => {
    //     // 存储北京图区域
    //     this.detail_img = {};
    //     this.detail_img = res.data.results[0];
    //     //    this.id="";
    //   });
    //   // 北京图片结束
    //   // 旅游攻略
    //   this.$axios.get("/detail_title?lid=" + this.iid).then((res) => {
    //     // 旅游攻略
    //     this.detail_title = {};
    //     this.detail_title = res.data.results[0];
    //     //    this.id="";
    //   });
    //   // 旅游攻略结束
    //   // 内容速览内容
    //   this.$axios.get("/detail_sulan?lid=" + this.iid).then((res) => {
    //     //    内容速览
    //     this.detail_sulan = [];
    //     this.detail_sulan = res.data.results;
    //     //    this.id="";
    //   });
    //   // 内容速览内容
    //   // 宫格开始
    //   this.$axios.get("/detail_gge?lid=" + this.iid).then((res) => {
    //     // 9宫格
    //     this.detail_gge = [];
    //     this.detail_gge = res.data.results;
    //     //    this.id="";
    //   });
    //   //     //  宫格结束
    // },
  },
  created() {
    this.iid = this.$route.params.id;

    // tab栏数据
    this.$axios.get("/detail_tab?lid=1").then((res) => {
      this.detail_tab = res.data.results;
    });

    // tab栏数据结束
    // 北京图片
    this.$axios.get("/detail_img?lid=1").then((res) => {
      this.detail_img = res.data.results;
    });

    // 北京图片结束
    // 旅游攻略

    this.$axios.get("/detail_title?lid=1 ").then((res) => {
      this.detail_title = res.data.results;
    });
    // 旅游攻略结束

    // 内容速览内容
    this.$axios.get("/detail_sulan?lid=1").then((res) => {
      this.detail_sulan = res.data.results;
    });
    // 内容速览内容
    // 宫格开始
    this.$axios.get("/detail_gge?lid=1").then((res) => {
      this.detail_gge = res.data.results;
    });

    //     //  宫格结束
  },
};
</script>
